<template>
	<view class="index-container">
		<noLogin v-if="!trainId" :userInfo="userNameInfo"></noLogin>

		<hasLogin v-if="trainId" :userInfo="userInfo"></hasLogin>
		<view class="my-course">
			<view class="name-style">教学课程</view>
			<view class="couse-more" @click="moreBtn">更多<u-icon name="arrow-right"></u-icon></view>
		</view>
		<courseList :courseListData="courseListData"></courseList>
		<view class="my-zone" style="margin-top: 60rpx;">
			关于我们
		</view>
		<view class="zone-container">
			<view class="" v-for="(item,index) in aboutUsList" :key="index" style="margin-top: 60rpx;">
				<view class="course-content" @click="aboutUsListBtn(index)">
					<view class="course-img">
						<img :src="item.img" alt="" style="width: 100%; height: 100%; border-radius: 50%;">
					</view>
					<view class="course-name">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="code-img">
			<img :src="userNameInfo.wxImage" alt="" style="width: 100%; height: 100%;">
		</view>
		<view class="code-info">
			扫码联系老师
		</view>
		<view class="" style="width: 100%;height: 110rpx;">

		</view>
		<view class="bottom-tabbar">
			<view class="tab-one" @click="telShowBtn">
				<view class="tab-img"><u-icon name="phone"></u-icon></view>
				<view class="tab-name">咨询</view>
			</view>
			<view class="tab-one" @click="shareBtn">
				<view class="tab-img"><u-icon name="zhuanfa"></u-icon></view>
				<view class="tab-name">分享</view>
			</view>
			<view class="tab-three" style="background-color: #c90d36;" v-if="!trainId" @click="appointListen">
				预约试听
			</view>
			<view class="tab-three" style="background-color: #3f54c9;" :style="{width:!trainId ?'200rpx' : '400rpx'}"
				@click="claimCoupons">
				领取优惠券
			</view>
		</view>
		<telPage></telPage>
		<sharePage :additionVotesShow="additionVotesShow" @additionVotesShowBtn="additionVotesShowBtn"></sharePage>
	</view>

</template>

<script>
	import noLogin from './component/noLogin.vue';
	import hasLogin from './component/hasLogin.vue';
	import courseList from '@/components/courseList.vue';
	import telPage from '@/components/telPage.vue';
	import sharePage from '@/components/sharePage.vue';
	import {
		goLogin
	} from '@/utils/http.js'
	import {
		artUser,
		getSchoolInfo,
		getCourseList
	} from '@/utils/api.js'
	export default {
		components: {
			noLogin,
			courseList,
			hasLogin,
			telPage,
			sharePage
		},
		data() {
			return {
				userInfo: {},
				aboutUsList: [{
					img: '../../../static/index/jiaoshi.png',
					name: "教师团队"
				}, {
					img: '../../../static/index/jiaoxue.png',
					name: "教学环境"
				}, {
					img: '../../../static/index/youxiu.png',
					name: "优秀作品"
				}, {
					img: '../../../static/index/lianxi.png',
					name: "联系我们"
				}, ],
				trainId: null,
				courseListData: [],
				userNameInfo: {
					image:'',
					name:''
				},
				additionVotesShow: false
			}
		},
		onShow() {
			this.info()
		},
		created() {
			uni.$on('telShow', telShow => {
				this.telShow = telShow;

			})

		},
		methods: {
			async getSchoolInfo() {
				// uni.showLoading()
				const res = await getSchoolInfo()
				if (res.code == 200) {
					uni.hideLoading()
					this.userNameInfo = res.data
					uni.setStorageSync('userNameInfo', res.data)
					document.title = res.data.name;
				}

			},
			async getCourseList() {
				// uni.showLoading()
				const res = await getCourseList()
				if (res.code == 200) {
					uni.hideLoading()
					this.courseListData = res.rows
				}
			},
			appointListen() {
				uni.navigateTo({
					url: '/pages/course/courseList'
				})
			},
			info() {
				if (!uni.getStorageSync('token')) {
					goLogin()
					return
				}
				this.artUser()
				this.getSchoolInfo()
				this.getCourseList()
			},
			async artUser() {
				const {
					data,
					code
				} = await artUser()
				if (code === 200) {
					if (data) {
						this.userInfo = data
						this.trainId = data.id
						uni.setStorageSync('trainId', data.id)
						uni.setStorageSync('trainneInfo', data)
					} else {
						uni.removeStorageSync('trainneInfo');
						uni.removeStorageSync('trainId');
					}

				}
			},
			imgDetail() {
				uni.navigateTo({
					// url: '/pages/index/imgDetail',

				})

			},
			moreBtn() {
				uni.navigateTo({
					url: '/pages/course/courseList'
				})
			},
			telShowBtn() {
				uni.$emit("telShow", true)
			},
			aboutUsListBtn(index) {
				if (index === 0) {
					uni.navigateTo({
						url: '/pages/index/teacherTeam'
					})
				} else if (index === 1) {
					uni.navigateTo({
						url: '/pages/index/imgDetail'
					})
				} else if (index === 2) {
					uni.navigateTo({
						url: '/pages/index/worksExcellence'
					})
				} else if (index === 3) {
					uni.$emit("telShow", true)
				}
			},
			claimCoupons() {
				uni.navigateTo({
					url: '/pages/index/claimCoupons'
				})
			},
			shareBtn() {
				this.additionVotesShow = true
			},
			additionVotesShowBtn(res) {
				this.additionVotesShow = res
			}
		}
	}
</script>
<style>
	page {
		background-color: #efefef;
	}
</style>

<style scoped lang="scss">
	.my-course {
		margin-top: 60rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 40rpx;
	}

	.name-style {
		font-size: 32rpx;
		letter-spacing: 2rpx;
		font-weight: bold;
	}

	.couse-more {
		font-size: 24rpx;
	}


	.code-img {
		width: 200rpx;
		height: 200rpx;
		margin: 40rpx auto;
	}

	.code-info {
		text-align: center;
		color: #747474;
		padding-bottom: 60rpx;
	}

	.bottom-tabbar {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
	}

	.tab-one {
		width: 90rpx;
		text-align: center;
	}

	.tab-name {
		margin-top: 8rpx;
	}

	.tab-three {
		width: 200rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		color: #ffffff;
		border-radius: 100rpx;

	}

	.zone-container {
		width: 95%;
		background-color: #ffffff;
		// height: 300rpx;
		margin: 20rpx auto;
		border-radius: 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx 20rpx;

	}

	.zine-content {
		width: 330rpx;
		height: 150rpx;
		margin-bottom: 10rpx;
		margin-top: 10rpx;
		background-color: #f3f3f3;
		border-radius: 16rpx;
		display: flex;
		position: relative;
	}

	.zc-left {
		margin-top: 30rpx;
		margin-left: 20rpx;
	}

	.zc-title {
		font-size: 30rpx;
		letter-spacing: 2rpx;
		font-weight: bold;
	}

	.zc-intro {
		font-size: 24rpx;
		margin-top: 20rpx;
		color: #656565;
		width: 180rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.zc-right {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
		;
	}

	.course-img {
		width: 100rpx;
		height: 100rpx;
		margin: 0 auto;
	}

	.my-zone {
		margin-top: 750rpx;
		margin-left: 40rpx;
		font-size: 32rpx;
		letter-spacing: 2rpx;
		font-weight: bold;
	}
</style>